<ul class="devui-accordion-menu">
    <li class="devui-accordion-item" *ngFor="let item of data; let i = index;"
        [ngClass]="{
            'open': item[openKey],
            'has-active-item': item[childrenKey] && item[childrenKey].indexOf(activeItem) > -1,
            'disabled': item[disabledKey]
        }"
        [routerLinkActive]="'devui-router-active'"
        >
        <ng-template [ngTemplateOutlet]="menuItemTemplate || defaultItemTemplate" [ngTemplateOutletContext]="{
            item: item,
            deepth: 0,
            titleKey: titleKey,
            openKey: openKey,
            disabledKey: disabledKey,
            menuToggleFn: menuToggleFn
        }"></ng-template>
        <span class="devui-icon icon icon-chevron-down open-icon">
            <svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <polygon points="4.5 5 8 8.76923077 11.5 5 13 6.61538462 8 12 3 6.61538462"></polygon>
                </g>
            </svg>
        </span>
        <ng-container *ngIf="!innerListTemplate">
            <ng-container *ngIf="item[childrenKey] && item[childrenKey].length > 0">
                <ul class="devui-accordion-submenu" [attr.hidden]="item[openKey] ? null : 'hidden'">
                    <li class="devui-accordion-item" *ngFor="let subitem of item[childrenKey]; let i = index;"
                        [routerLinkActive]="'devui-router-active'"
                        [ngClass]="{'active': subitem[activeKey],'disabled':subitem[disabledKey]}">
                        <ng-template *ngIf="itemTemplate || !(linkType === 'routerLink' || linkType === 'dependOnLinkTypeKey')"
                        [ngTemplateOutlet]="itemTemplate
                            || (linkType === 'hrefLink' && hreflinkItemTemplate)
                            || defaultItemTemplate"
                        [ngTemplateOutletContext]="{
                            parent: item,
                            item: subitem,
                            deepth: 1,
                            titleKey: titleKey,
                            activeKey: activeKey,
                            disabledKey: disabledKey,
                            itemClickFn: itemClickFn
                        }"></ng-template>
                        <ng-container *ngIf="linkType === 'routerLink'">
                          <a [routerLink]="subitem[linkKey]" [routerLinkActive]="'devui-router-active'"
                              target="{{subitem[linkTargetKey] || linkDefaultTarget}}" rel="noopener"
                              class="devui-accordion-item-title over-flow-ellipsis"
                              [ngClass]="{'disabled':subitem[disabledKey]}"
                              title="{{subitem[titleKey]}}" *ngIf="!subitem[disabledKey]">
                              {{subitem[titleKey]}}
                          </a>
                          <a class="devui-accordion-item-title over-flow-ellipsis"
                              [ngClass]="{'disabled':subitem[disabledKey], 'active': subitem[activeKey]}"
                              title="{{subitem[titleKey]}}" *ngIf="subitem[disabledKey]">
                              {{subitem[titleKey]}}
                          </a>
                      </ng-container>
                      <ng-container *ngIf="linkType === 'dependOnLinkTypeKey'">
                          <a href="{{subitem[linkKey]}}" target="{{subitem[linkTargetKey] || linkDefaultTarget}}" rel="noopener"
                              class="devui-accordion-item-title over-flow-ellipsis"
                              [ngClass]="{'disabled':subitem[disabledKey], 'active': subitem[activeKey]}"
                              title="{{subitem[titleKey]}}" *ngIf="subitem[linkTypeKey] ==='hrefLink' && !subitem[disabledKey]">
                              {{subitem[titleKey]}}
                          </a>
                          <a [routerLink]="subitem[linkKey]" [routerLinkActive]="'devui-router-active'"
                              target="{{subitem[linkTargetKey] || linkDefaultTarget}}" rel="noopener"
                              class="devui-accordion-item-title over-flow-ellipsis"
                              title="{{subitem[titleKey]}}" *ngIf="subitem[linkTypeKey] ==='routerLink'&& !subitem[disabledKey]">
                              {{subitem[titleKey]}}
                          </a>
                          <a class="devui-accordion-item-title over-flow-ellipsis"
                              [ngClass]="{'disabled':subitem[disabledKey], 'active': subitem[activeKey]}"
                              title="{{subitem[titleKey]}}"
                              *ngIf="(subitem[linkTypeKey] ==='hrefLink' || subitem[linkTypeKey] ==='routerLink') && subitem[disabledKey]">
                              {{subitem[titleKey]}}
                          </a>
                          <div class="devui-accordion-item-title over-flow-ellipsis"
                              [ngClass]="{'disabled':subitem[disabledKey], 'active': subitem[activeKey]}"
                              (click)="!subitem[disabledKey] && itemClickFn(item);"
                              title="{{subitem[titleKey]}}"
                              *ngIf="subitem[linkTypeKey] !=='hrefLink' && subitem[linkTypeKey] !=='routerLink'">
                              {{subitem[titleKey]}}
                          </div>
                      </ng-container>
                    </li>
                </ul>
            </ng-container>
            <ng-container *ngIf="(!item[childrenKey] || item[childrenKey].length === 0)">
                <ul class="devui-accordion-submenu" [attr.hidden]="item[openKey] ? null : 'hidden'" *ngIf="item[loadingKey] || showNoContent">
                    <li class="devui-accordion-item" *ngIf="item[loadingKey] && !loadingTemplate">
                        <div class="devui-accordion-item-title over-flow-ellipsis">{{i18nText.LOADING_TEXT}}</div>
                    </li>
                    <ng-template [ngTemplateOutlet]="loadingTemplate" [ngTemplateOutletContext]="{item: item, loadingKey:loadingKey}" *ngIf="item[loadingKey] && loadingTemplate"></ng-template>
                    <ng-container *ngIf="showNoContent && !noContentTemplate">
                        <li class="devui-accordion-item disabled" *ngIf="!item[loadingKey]" >
                            <div class="devui-accordion-item-title over-flow-ellipsis">{{i18nText.NO_DATA}}</div>
                        </li>
                    </ng-container>
                    <ng-template [ngTemplateOutlet]="noContentTemplate" [ngTemplateOutletContext]="{item: item}" *ngIf="showNoContent && noContentTemplate && !item[loadingKey]"></ng-template>
                </ul>
            </ng-container>
        </ng-container>
        <!-- 自定义子层模板 -->
        <div *ngIf="innerListTemplate" [attr.hidden]="item[openKey] ? null : 'hidden'">
            <ng-template [ngTemplateOutlet]="innerListTemplate" [ngTemplateOutletContext]="{
                item: item,
                titleKey: titleKey,
                disabledKey: disabledKey,
                activeKey: activeKey,
                childrenKey: childrenKey,
                itemClickFn: itemClickFn,
                menuToggleFn: menuToggleFn,
                openKey: openKey
            }"></ng-template>
        </div>
    </li>
</ul>

<ng-template #defaultItemTemplate let-item="item" let-deepth="deepth" let-titleKey="titleKey" let-disabledKey="disabledKey" let-activeKey="activeKey"
    let-itemClickFn="itemClickFn"  let-menuToggleFn="menuToggleFn">
    <div class="devui-accordion-item-title over-flow-ellipsis" [ngClass]="{'disabled':item[disabledKey], 'active': item[activeKey]}"
        (click)="!item[disabledKey] && (deepth === 0 ? menuToggleFn(item) : itemClickFn(item))"
        title="{{item[titleKey]}}">
        {{item[titleKey]}}
    </div>
</ng-template>

<ng-template #hreflinkItemTemplate let-item="item" let-deepth="deepth" let-titleKey="titleKey" let-disabledKey="disabledKey" let-activeKey="activeKey"
    let-itemClickFn="itemClickFn"  let-menuToggleFn="menuToggleFn">
    <a href="{{item[linkKey]}}" target="{{item[linkTargetKey] || linkDefaultTarget}}" rel="noopener" class="devui-accordion-item-title over-flow-ellipsis"
        [ngClass]="{'disabled':item[disabledKey], 'active': item[activeKey]}"
        title="{{item[titleKey]}}" *ngIf="!item[disabledKey]">
        {{item[titleKey]}}
    </a>
    <a class="devui-accordion-item-title over-flow-ellipsis" [ngClass]="{'disabled':item[disabledKey], 'active': item[activeKey]}"
        title="{{item[titleKey]}}" *ngIf="item[disabledKey]">
        {{item[titleKey]}}
    </a>
</ng-template>
